🔥 "สาย Front-End ต้องแชร์ !!" กับสรุปรวมเครื่องมือ และ Framework ดี ๆ ที่ต้องบอกต่อสำหรับคนทำหน้าเว็บ <3
.
ต้องบอกว่าวันนี้แอดและทีมงานได้รวบรวมเครื่องมือเครื่องไม้ ที่จะทำให้งานยาก ๆ กลายเป็นงานง่าย ๆ ไว้ในที่เดียวให้แล้วว
.
⭐️ ใครที่กำลังเริ่มสาย Front-End หรือ ต้องการหาของดีรีบเข้ามาดูได้เลย สำหรับลิงก์ในการเข้าไปดาวน์โหลด / อ่าน Doc / วิธีการใช้งาน ดูด้านล่างได้เลยคร้าบผมมม ^__^
.
👩🎨เครื่องมือเด็ดที่คุณต้องแชร์ของสาย Frontend
.
📚 JavaScript Framework
.
Vue.js
https://vuejs.org/
.
Angular
https://angular.io/
.
React
https://reactjs.org/
.
Backbone.js
https://backbonejs.org/
.
🎨 CSS Framework
.
Bootstrap
https://getbootstrap.com/
.
Materialize
https://materializecss.com/about.html
.
Pure.css
https://purecss.io/
.
Bulma
https://bulma.io/
.
Semantic UI
https://semantic-ui.com/
.
📖 Library
.
sweetalert2 : สำหรับสร้าง Alert สวยๆได้ง่ายๆ
https://sweetalert2.github.io/
.
AlertifyJS : สร้าง Alert สวยๆเหมือนกัน
https://alertifyjs.com/
.
Chart.js : สำหรับสร้าง Chart แบบมี animation
https://www.chartjs.org/
.
jQuery : ใช้งาน JS และจัดการ DOM ได้ง่ายขึ้น
https://jquery.com/
.
DataTables : เปลี่ยน Table แบบเดิมๆให้ดูดีมี function ได้ง่ายๆ
http://fredsarmento.me/frontend-tools/
.
Quill editor : Text Editor สำหรับใส่ในเว็บเครื่องมือครบๆ
https://quilljs.com/
.
🧰 Developing & Debugging Tools
.
Chrome DevTools : เครื่องมือ Debug เว็บ เพียงแค่กด F12 เบราเซอร์อื่นๆก็มีเหมือนกัน
https://developers.google.com/web/tools/chrome-devtools
.
CodePen : Online Editor ที่สามารถจำลอง enviroment ที่เหมาะสมได้เขียนแล้วเห็นผลทันที
https://codepen.io/
.
WebStorm : Web Editor ที่รองรับ Framework ที่หลากหลาย
https://www.jetbrains.com/webstorm/
.
🍱 Other (Asset)
.
Google Fonts : font ฟรีสวยๆของ google
https://fonts.google.com/
.
awesome : Icon ฟรีสวยๆ
https://fontawesome.com/
.
figma : สำหรับออกแบบหน้าเว็บ จัดวางองค์ประกอบหรือแม้แต่สร้าง Prototype
https://www.figma.com/files/recent
.
Visual Inspector : extension chrome ที่ช่วยให้ตรวจสอบองค์ประกอบต่างๆของเว็บได้ค่อนข้างครบถ้วน
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc
.
CSS Peeper : extension chromeอีกหนึ่งตัวที่ใช้ตรวจสอบองค์ประกอบเว็บ
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
.
" หรือถ้าใครเคยใช้ตัวไหนมาแล้ว สามารถมาแบ่งปันประสบการณ์ในการใช้งานใน Comment กับแอดได้เลยยย ใครมีตัวไหนแนะนำใส่มาได้เต็มที่เลยคร้าบผมม <3 "
.
#BorntoDev - 🦖 Coding Academy ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
同時也有1部Youtube影片,追蹤數超過5,250的網紅Nguyễn Hải Trung,也在其Youtube影片中提到,Tặng bạn 30 khóa học miễn phí Về lập trình web và tiếp thị liên kết Tất cả đều có trên https://gioi.net ? Đặt vé máy bay giá rẻ: http://vnbay.vn ? Đă...
「bootstrap text」的推薦目錄:
- 關於bootstrap text 在 BorntoDev Facebook 的最讚貼文
- 關於bootstrap text 在 卡斯伯 Facebook 的最讚貼文
- 關於bootstrap text 在 卡斯伯 Facebook 的最佳解答
- 關於bootstrap text 在 Nguyễn Hải Trung Youtube 的最佳貼文
- 關於bootstrap text 在 Set font-weight using Bootstrap classes - Stack Overflow 的評價
- 關於bootstrap text 在 Bootstrap Tutorial #10 - Text Styles - YouTube 的評價
- 關於bootstrap text 在 Alert component - React-Bootstrap 的評價
- 關於bootstrap text 在 No responsiveness for text-justify? #29679 - twbs/bootstrap 的評價
bootstrap text 在 卡斯伯 Facebook 的最讚貼文
Bootstrap 4.1 來囉
穩定版後修改幅度就不大
這次反而是新增許多 Class
- text-monospace <- 這是台中的空間嗎!?
- .shadow-* <- 喔~ ya,有陰影可以活用了
- .flex-fill, .flex-grow-*, and .flex-shrink-* 更多的 flex 使用方式,看來課程要補充 flex 的計算方式囉 😆
更多內容可先查看官方 Blog
#Bootstrap4
bootstrap text 在 卡斯伯 Facebook 的最佳解答
Bootstrap 4 與 其他版本的差異
---
最近試著用 Bootstrap 4 製作一個網站
撇除目前還在測試中...不斷更新外
Bootstrap 4 有很多新功能我很喜歡
1. 額外提供 outline 版本的按鈕
2. float、text-align 均有提供不同解析度的版本 (xs, md...)
3. 雜項(utilities)多了很多 margin、padding 的樣式,讓排版更為自由
4. navbar 的底色是半透明,讓 navbar 的配色更為自由
5. 直接提供 sass 的版本
我是直接使用 sass 的版本
最痛的經驗是在更新的時候很多 className 換了 @_@
但整體來說挺滿意的
#bootstrap #css
bootstrap text 在 Nguyễn Hải Trung Youtube 的最佳貼文
Tặng bạn 30 khóa học miễn phí
Về lập trình web và tiếp thị liên kết
Tất cả đều có trên https://gioi.net
? Đặt vé máy bay giá rẻ: http://vnbay.vn
? Đăng ký kênh: http://bit.ly/tusachvang
? Fanpage: http://fb.com/hocthietkeweb
#tusachvang #datmatrung #nguyenhaitrung
#hoctuxa #longvantu #bangdang #seoimk
#seoims #hocthietkeweb #gioinet #vnbay
#datvemaybay #photocopy #thietkeweb
bootstrap text 在 Bootstrap Tutorial #10 - Text Styles - YouTube 的推薦與評價
We can always override the base Bootstrap text styles by using our own CSS. You can find more front-end ... ... <看更多>
bootstrap text 在 Alert component - React-Bootstrap 的推薦與評價
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight variant s. ... <看更多>
bootstrap text 在 Set font-weight using Bootstrap classes - Stack Overflow 的推薦與評價
... <看更多>
相關內容